<template>
  <div class="bindPhone">
    <div class="height">
      <span>绑定手机号</span>
    </div>
    <div class="personalList">
        <div class="paymentBox">
            <div class="title">
                手机号码：
            </div>
            <div class="itemBox">
                <el-input v-model="phone" placeholder="请输入手机号码" style="margin-right: 3px;"></el-input>
                <el-button type="warning" v-show="!identifying" round @click="obtain">获取验证码</el-button>
                <el-button type="info" v-show="identifying" round>{{time}}秒</el-button>
            </div>
        </div>
        <div class="paymentBox">
            <div class="title">
                验证码：
            </div>
            <div class="itemBox">
                <el-input v-model="smsCode" placeholder="请输入验证码"></el-input>
            </div>
        </div>
    </div>
    <div class="btn" align="center">
        <button id="confirm" @click="regihterOpenid">确认绑定</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'bindPhone',
  data () {
    return {
        identifying: false,
        time: 60,
        smsCode: '',
        phone: '',
    }
  },
  computed:{
    openId() {
      return this.$store.state.app.openId
    },
  },
  mounted(){
    console.log(this.openId)
  },
  methods:{
    obtain(){
        this.axios.post('/app/app/user/sendSms',{
                phone: this.phone,
                templateCode: 'register',
        })
        .then(res =>{
            // console.log(res.data);
        })
        this.identifying = true;
        this.time = 60;
        var Interval = setInterval(() => {
          this.time = this.time - 1;
          if(this.time == 0){
              this.identifying = false;
              clearInterval(Interval)
          }
        }, 1000);
    },
    regihterOpenid(){
        this.axios({
            method: 'post',
            url: '/app/app/user/regihterOpenid',
            data: {
                openId: this.openId,
                phone: this.phone,
                smsCode: this.smsCode,
            },
        }).then(res =>{
            // console.log(res.data);
            let userData = res.data;
            if(userData.data){
              this.$store.commit('inuserId',userData.data.userId);
              this.$store.commit('intoken',userData.data.token);
                this.$router.push("/");
            }
        })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.height{
  background: #fcd927;height: 42px;font-size: 16px;line-height: 42px;text-align: center;color: #fff;padding: 0 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);margin-bottom: 3px;
}
.personalList{padding: 20px 5px 10px 10px;}
.paymentBox{display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}
.itemBox{flex-grow: 1;display: flex;justify-content: space-between;align-items: center;}
.itemBox span{font-size: 16px;}
.title{font-size: 16px;width: 80px;text-align: right;flex-shrink: 0;}
.btn{padding-top: 20px;}
#confirm{width: 280px;height: 42px;background: crimson;border-radius: 4px;text-align: center;line-height: 42px;box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);font-size: 16px;color: #fff;}
</style>

